<template>
<div class="table">
        <div class="divSearch">
            <!--搜索框-->
            <Row>
                <!--根据需求删除不不要查询条件-->
                <Col :lg="{span:5}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
                <label class="searchLabel">地区:</label>
                    <Select v-model="searchModel.AreaCode"  placeholder="请选择..." class="searchInput" @on-change="getStatsList()">
                        <Option :value="userinfo.AreaCode">全部</Option>
                        <Option :value="item.value" v-for="item in AreaList" :key="item.value">{{item.label}}</Option>
                    </Select>
                </Col>
                <Col :lg="{span:5}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
                    <label class="searchLabel">年份:</label>
                    <Select v-model="searchModel.FillInYear"  placeholder="请选择..." class="searchInput" @on-change="getStatsList()">
                        <Option value="">全部</Option>
                        <Option :value="item.DictText" v-for="item in CreateYearList" :key="item.DictText">{{item.DictText}}</Option>
                    </Select>
                </Col>
                <!-- <Col :lg="{span:2}" :md="{span:2}" :sm="{span:2}" :xs="{span:2}">
                    <Button icon="ios-search" type="primary" @click="getStatsList()" class="searchButton">查询</Button>
                </Col> -->
                <Col :lg="{span:2}" :md="{span:2}" :sm="{span:2}" :xs="{span:2}">
                    <Button icon="ios-export" type="primary" @click="getExcelData()" class="searchButton">数据导出</Button>
                </Col>
                <Col >
                    <RadioGroup v-model="CheckButton" @on-change="changeButton" type="button" class="searchRight" >
                        <Radio label="listShow" title="列表"><span class="iconTitle">列表</span><Icon type="ios-paper" size="16"></Icon></Radio>
                        <Radio label="pieShow" title="饼图"><span class="iconTitle">柱状图</span><Icon type="ios-pie" size="16"></Icon></Radio>   
                        <Radio label="mapShow" title="地图"><span class="iconTitle">地图</span><Icon type="android-map" size="16"></Icon></Radio>                                                                               
                    </RadioGroup>    
                </Col>
            </Row>
        </div>
        <Row  v-show="listShow">
            <!-- 列表-->
            <Col>
                <table  class="ContentTable">
                    <caption>
                        <div>
                            <span class="tableNum">{{CurrentYear}}年(九){{CurrentAreaName}}蔬菜技术推广机构及人员情况统计表(全面统计)</span>
                            <span class="tip">单位：个、人</span>
                        </div>
                    </caption>
                    <thead>
                        <tr>
                            <th rowspan="3" width="72">地区</th>
                            <th colspan="4">蔬菜技术服务机构数(个)</th>
                            <th colspan="19">专业技术人员数量(人)</th>
                            <!-- <th v-show="isProvince" rowspan="3" width="100px">操作</th> -->
                        </tr>
                        <tr>
                            <th rowspan="2">总数</th>
                            <th colspan="3">其中</th>
                            <th rowspan="2">总数</th>
                            <th colspan="2">其中</th>
                            <th colspan="2">按性别分</th>
                            <th colspan="4">按年龄分</th>
                            <th colspan="5">按学历层次分</th>
                            <th colspan="5">职称情况</th>
                        </tr>
                        <tr>
                            <th>州市级</th>
                            <th>县级</th>
                            <th>乡镇级</th>
                            <th>州市级人数</th>
                            <th>县乡级人数</th>
                            <th>男</th>
                            <th>女</th>
                            <th>30岁以下(含30)</th>
                            <th>30-40岁(含40)</th>
                            <th>40-50岁(含50)</th>
                            <th>50岁以上</th>
                            <th>硕士及以上</th>
                            <th>本科</th>
                            <th>大专</th>
                            <th>中专(技校)</th>
                            <th>其他</th>
                            <th>正高级职称</th>
                            <th>副高级职称</th>
                            <th>中级职称</th>
                            <th>初级职称</th>
                            <th>其他</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index)  in datas" :key="item.AreaCode" :class="{'tdColor':index%2!=0}">
                            <td width="72">{{item.AreaName}}</td>
                            <td>{{item.InstituNum|formatCurrency}}</td>
                            <td>{{item.InstituNum_City|formatCurrency}}</td>
                            <td>{{item.InstituNum_Area|formatCurrency}}</td>
                            <td>{{item.InstituNum_town|formatCurrency}}</td>
                            <td>{{item.PeopleNum|formatCurrency}}</td>
                            <td>{{item.PeopleNum_City|formatCurrency}}</td>
                            <td>{{item.PeopleNum_Area|formatCurrency}}</td>
                            <td>{{item.PeopleNum_man|formatCurrency}}</td>
                            <td>{{item.PeopleNum_woman|formatCurrency}}</td>
                            <td>{{item.PeopleNum_age1|formatCurrency}}</td>
                            <td>{{item.PeopleNum_age2|formatCurrency}}</td>
                            <td>{{item.PeopleNum_age3|formatCurrency}}</td>
                            <td>{{item.PeopleNum_age4|formatCurrency}}</td>
                            <td>{{item.PeopleNum_xlss|formatCurrency}}</td>
                            <td>{{item.PeopleNum_xlbk|formatCurrency}}</td>
                            <td>{{item.PeopleNum_xldz|formatCurrency}}</td>
                            <td>{{item.PeopleNum_xlzz|formatCurrency}}</td>
                            <td>{{item.PeopleNum_xlqt|formatCurrency}}</td>
                            <td>{{item.PeopleNum_zczgj|formatCurrency}}</td>
                            <td>{{item.PeopleNum_zcfgj|formatCurrency}}</td>
                            <td>{{item.PeopleNum_zczj|formatCurrency}}</td>
                            <td>{{item.PeopleNum_zccj|formatCurrency}}</td>
                            <td>{{item.PeopleNum_zcqt|formatCurrency}}</td> 
                            <!-- <td v-show="isProvince" width="100px">
                                <Button  size="small" type="primary"  @click="getDetail(item.AreaCode)">详情</Button>
                                <Button  size="small" type="primary" @click="getExcelData(item.AreaCode)">导出</Button>
                            </td> -->
                        </tr>
                    </tbody>
                </table>
            </Col>
        </Row>
        <Row v-show="pieShow">
            <!--饼图-->
            <Tabs type="card">
                <TabPane label="蔬菜技术服务机构"><div  id="divBarOne" style="border:1px solid #D7DDE4; ">乡镇信息</div></TabPane>
                <TabPane label="专业技术人员">
                    <Tabs type="line">
                        <TabPane label="按地区分">
                            <div id="divBarTwo" style="border:1px solid #D7DDE4;"></div>
                        </TabPane>
                        <TabPane label="按性别分">
                            <div id="divBarThree" style="border:1px solid #D7DDE4; ">2</div>
                        </TabPane>
                        <TabPane  label="按年龄分">
                            <div id="divBarFour" style="border:1px solid #D7DDE4; ">3</div>
                        </TabPane>
                        <TabPane label="按学历分">
                            <div id="divBarFive" style="border:1px solid #D7DDE4; ">4</div>
                        </TabPane>
                        <TabPane label="职称情况">
                            <div id="divBarSix" style="border:1px solid #D7DDE4; ">4</div>
                        </TabPane>
                    </Tabs>
                </TabPane>
            </Tabs>
        </Row>
        <Row  v-show="mapShow">
            <!--地图展示-->
            <Tabs type="card">
                <TabPane label="蔬菜技术服务机构"><div  id="divMapOne" style="border:1px solid #D7DDE4; ">乡镇信息</div></TabPane>
                <TabPane label="专业技术人员">
                    <Tabs type="line">
                        <TabPane label="按地区分">
                            <div id="divMapTwo" style="border:1px solid #D7DDE4;"></div>
                        </TabPane>
                        <TabPane label="按性别分">
                            <div id="divMapThree" style="border:1px solid #D7DDE4; ">2</div>
                        </TabPane>
                        <TabPane  label="按年龄分">
                            <div id="divMapFour" style="border:1px solid #D7DDE4; ">3</div>
                        </TabPane>
                        <TabPane label="按学历分">
                            <div id="divMapFive" style="border:1px solid #D7DDE4; ">4</div>
                        </TabPane>
                        <TabPane label="职称情况">
                            <div id="divMapSix" style="border:1px solid #D7DDE4; ">4</div>
                        </TabPane>
                    </Tabs>
                </TabPane>
            </Tabs>
        </Row>
        <Modal v-model="detailView" :mask-closable="false" width="1200">
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">(一){{searchModel.FillInYear}}-{{CurrentAreaName}}-(一)蔬菜用地情况调查表(全面统计)</span>
            </p>
            <p slot="close">
                <Icon type="close-circled" color="red" size=25></Icon>
            </p>
                <table  class="DetailTable">
                    <thead>
                        <tr>
                            <th rowspan="3" width="72">地区</th>
                            <th colspan="4">蔬菜技术服务机构数(个)</th>
                            <th colspan="19">专业技术人员数量(人)</th>
                        </tr>
                        <tr>
                            <th rowspan="2">总数</th>
                            <th colspan="3">其中</th>
                            <th rowspan="2">总数</th>
                            <th colspan="2">其中</th>
                            <th colspan="2">按性别分</th>
                            <th colspan="4">按年龄分</th>
                            <th colspan="5">按学历层次分</th>
                            <th colspan="5">职称情况</th>
                        </tr>
                        <tr>
                            <th>州市级</th>
                            <th>县级</th>
                            <th>乡镇级</th>
                            <th>州市级人数</th>
                            <th>县乡级人数</th>
                            <th>男</th>
                            <th>女</th>
                            <th>30岁以下(含30)</th>
                            <th>30-40岁(含40)</th>
                            <th>40-50岁(含50)</th>
                            <th>50岁以上</th>
                            <th>硕士及以上</th>
                            <th>本科</th>
                            <th>大专</th>
                            <th>中专(技校)</th>
                            <th>其他</th>
                            <th>正高级职称</th>
                            <th>副高级职称</th>
                            <th>中级职称</th>
                            <th>初级职称</th>
                            <th>其他</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index)  in detailDatas" :key="item.AreaCode" :class="{'tdColor':index%2!=0}">
                            <td width="72">{{item.AreaName}}</td>
                            <td>{{item.InstituNum}}</td>
                            <td>{{item.InstituNum_City}}</td>
                            <td>{{item.InstituNum_Area}}</td>
                            <td>{{item.InstituNum_town}}</td>
                            <td>{{item.PeopleNum}}</td>
                            <td>{{item.PeopleNum_City}}</td>
                            <td>{{item.PeopleNum_Area}}</td>
                            <td>{{item.PeopleNum_man}}</td>
                            <td>{{item.PeopleNum_woman}}</td>
                            <td>{{item.PeopleNum_age1}}</td>
                            <td>{{item.PeopleNum_age2}}</td>
                            <td>{{item.PeopleNum_age3}}</td>
                            <td>{{item.PeopleNum_age4}}</td>
                            <td>{{item.PeopleNum_xlss}}</td>
                            <td>{{item.PeopleNum_xlbk}}</td>
                            <td>{{item.PeopleNum_xldz}}</td>
                            <td>{{item.PeopleNum_xlzz}}</td>
                            <td>{{item.PeopleNum_xlqt}}</td>
                            <td>{{item.PeopleNum_zczgj}}</td>
                            <td>{{item.PeopleNum_zcfgj}}</td>
                            <td>{{item.PeopleNum_zczj}}</td>
                            <td>{{item.PeopleNum_zccj}}</td>
                            <td>{{item.PeopleNum_zcqt}}</td>                         
                        </tr>
                    </tbody>
                </table>
                <div slot="footer"></div>
        </Modal>
    </div>
</template>
<script>
export default {
    data() {
        return {
            self: this,
            CreateYearList: this.GetGroupDict("ReportYear"), //年度
            CurrentYear: this.GetCurrentYear(),//当前年度
            AreaList: this.SearchAreaList(this.GetlocaStorage("VegUserInfo").AreaCode),
            TotalData:[],
            Option:'1',
            CurrentAreaName:'',
            userinfo: this.GetlocaStorage("VegUserInfo"),//获取当前用户信息
            CheckButton:'listShow',
            datas:[],//列表数据
            detailDatas:[],//详情
            isProvince:false,//是否为省级账号(操作栏目显示)
            detailView:false,//modal显示开关
            mapType:'',
            echartsItem0:['蔬菜技术服务机构总数','州市级机构数','县级机构数','乡镇级机构数'],
            echartsItem1:['总人数','州市级人数','县乡级人数'],
            echartsItem2:['总人数','男','女'],
            echartsItem3:['总人数','30岁以下(含30)','30-40岁(含40)','40-50岁(含50)','50岁以上'],
            echartsItem4:['总人数','硕士及以上','本科','大专','中专(技校)','其他'],
            echartsItem5:['总人数','正高级职称','副高级职称','中级职称','初级职称','其他'],
            GeoData:'',
            //柱状图
            AreaData:[],
            InstituNumData: [],
            InstituNum_CityData: [],
            InstituNum_AreaData: [],
            InstituNum_townData: [],
            PeopleNumData: [],
            PeopleNum_CityData: [],
            PeopleNum_AreaData: [],
            PeopleNum_manData: [],
            PeopleNum_womanData: [],
            PeopleNum_age1Data: [],
            PeopleNum_age2Data: [],
            PeopleNum_age3Data: [],
            PeopleNum_age4Data: [],
            PeopleNum_xlssData: [],
            PeopleNum_xlbkData: [],
            PeopleNum_xldzData: [],
            PeopleNum_xlzzData: [],
            PeopleNum_xlqtData: [],
            PeopleNum_zczgjData: [],
            PeopleNum_zcfgjData: [],
            PeopleNum_zczjData: [],
            PeopleNum_zccjData: [],
            PeopleNum_zcqtData: [],
            barList0:[],
            barList1:[],
            barList2:[],
            barList3:[],
            barList4:[],
            barList5:[],
            //地图
            MapInstituNumData: [],
            MapInstituNum_CityData: [],
            MapInstituNum_AreaData: [],
            MapInstituNum_townData: [],
            MapPeopleNumData: [],
            MapPeopleNum_CityData: [],
            MapPeopleNum_AreaData: [],
            MapPeopleNum_manData: [],
            MapPeopleNum_womanData: [],
            MapPeopleNum_age1Data: [],
            MapPeopleNum_age2Data: [],
            MapPeopleNum_age3Data: [],
            MapPeopleNum_age4Data: [],
            MapPeopleNum_xlssData: [],
            MapPeopleNum_xlbkData: [],
            MapPeopleNum_xldzData: [],
            MapPeopleNum_xlzzData: [],
            MapPeopleNum_xlqtData: [],
            MapPeopleNum_zczgjData: [],
            MapPeopleNum_zcfgjData: [],
            MapPeopleNum_zczjData: [],
            MapPeopleNum_zccjData: [],
            MapPeopleNum_zcqtData: [],
            mapList0:[],
            mapList1:[],
            mapList2:[],
            mapList3:[],
            mapList4:[],
            mapList5:[],

            //查询模型：根据需求删除不不要查询条件
            //蔬菜生产情况表代码
            searchModel: {
                Id: '',
                ReportCode: 'VegBasicInfo',
                FillInYear: '',
                TimesType: '',
                AreaCode: this.GetlocaStorage("VegUserInfo").AreaCode,
                PageNumber: 1,
                PageSize: 20,
                Status: '4',
                Opinion: ''
            },
            listShow:true,//列表显示控制器
            pieShow:false,//饼图显示控制器
            mapShow:false,//地图显示控制器
        }  
    },
    //方法
    methods: {
         //展示切换
        changeButton:function(n){
            if(n=="listShow")
            {
                this.listShow=true;//显示列表
                this.pieShow=false;
                this.mapShow=false;
            }
            else if(n=="pieShow")
            {
                this.listShow=false;
                this.pieShow=true;//显示饼图
                this.mapShow=false;
            }
             else if(n=="mapShow")
            {
                this.listShow=false;
                this.pieShow=false;//显示地图
                this.mapShow=true;
            }
            else{
                 this.listShow=true;//默认显示列表
                 this.pieShow=false;
                 this.mapShow=false;
            }
        },
        getStatsList(){
            var self=this;
            if (self.searchModel.FillInYear != null && self.searchModel.FillInYear != '') {
                self.searchModel.FillInYear = self.searchModel.FillInYear;
            } else {
                self.searchModel.FillInYear = self.CurrentYear + '年';//填报年度-----数据字典值
            }
            //判断当前用户是否为省级账号
            if(self.userinfo.AreaCode=="530000000000")
            {
                self.isProvince=true;
                self.mapType=self.searchModel.AreaCode;
            }
            else{
                self.mapType=self.userinfo.AreaCode;
            }
            //柱状图
            self.AreaData=[];
            self.InstituNumData= [];
            self.InstituNum_CityData= [];
            self.InstituNum_AreaData= [];
            self.InstituNum_townData= [];
            self.PeopleNumData= [];
            self.PeopleNum_CityData= [];
            self.PeopleNum_AreaData= [];
            self.PeopleNum_manData= [];
            self.PeopleNum_womanData= [];
            self.PeopleNum_age1Data= [];
            self.PeopleNum_age2Data= [];
            self.PeopleNum_age3Data= [];
            self.PeopleNum_age4Data= [];
            self.PeopleNum_xlssData= [];
            self.PeopleNum_xlbkData= [];
            self.PeopleNum_xldzData= [];
            self.PeopleNum_xlzzData= [];
            self.PeopleNum_xlqtData= [];
            self.PeopleNum_zczgjData= [];
            self.PeopleNum_zcfgjData= [];
            self.PeopleNum_zczjData= [];
            self.PeopleNum_zccjData= [];
            self.PeopleNum_zcqtData= [];
            self.barList0=[];
            self.barList1=[];
            self.barList2=[];
            self.barList3=[];
            self.barList4=[];
            self.barList5=[];
            //地图
            self.MapInstituNumData= [];
            self.MapInstituNum_CityData= [];
            self.MapInstituNum_AreaData= [];
            self.MapInstituNum_townData= [];
            self.MapPeopleNumData= [];
            self.MapPeopleNum_CityData= [];
            self.MapPeopleNum_AreaData= [];
            self.MapPeopleNum_manData= [];
            self.MapPeopleNum_womanData= [];
            self.MapPeopleNum_age1Data= [];
            self.MapPeopleNum_age2Data= [];
            self.MapPeopleNum_age3Data= [];
            self.MapPeopleNum_age4Data= [];
            self.MapPeopleNum_xlssData= [];
            self.MapPeopleNum_xlbkData= [];
            self.MapPeopleNum_xldzData= [];
            self.MapPeopleNum_xlzzData= [];
            self.MapPeopleNum_xlqtData= [];
            self.MapPeopleNum_zczgjData= [];
            self.MapPeopleNum_zcfgjData= [];
            self.MapPeopleNum_zczjData= [];
            self.MapPeopleNum_zccjData= [];
            self.MapPeopleNum_zcqtData= [];
            self.mapList0=[];
            self.mapList1=[];
            self.mapList2=[];
            self.mapList3=[];
            self.mapList4=[];
            self.mapList5=[];
            self.GeoData=self.GetGeoData(self.mapType); 
            self.$http.post('VegTecPromotion/PostStats', self.searchModel).then(function (res) {
                    if(res.data.status===1){
                       self.datas= res.data.model;
                       self.CurrentAreaName=res.data.model[0].AreaName;
                       for(var i=1;i<res.data.model.length;i++)
                       {
                           //柱状图
                            self.AreaData.push(res.data.model[i].AreaName);
                            self.InstituNumData.push(res.data.model[i].InstituNum);
                            self.InstituNum_CityData.push(res.data.model[i].InstituNum_City);
                            self.InstituNum_AreaData.push(res.data.model[i].InstituNum_Area);
                            self.InstituNum_townData.push(res.data.model[i].InstituNum_town);
                            self.PeopleNumData.push(res.data.model[i].PeopleNum);
                            self.PeopleNum_CityData.push(res.data.model[i].PeopleNum_City);
                            self.PeopleNum_AreaData.push(res.data.model[i].PeopleNum_Area);
                            self.PeopleNum_manData.push(res.data.model[i].PeopleNum_man);
                            self.PeopleNum_womanData.push(res.data.model[i].PeopleNum_woman);
                            self.PeopleNum_age1Data.push(res.data.model[i].PeopleNum_age1);
                            self.PeopleNum_age2Data.push(res.data.model[i].PeopleNum_age2);
                            self.PeopleNum_age3Data.push(res.data.model[i].PeopleNum_age3);
                            self.PeopleNum_age4Data.push(res.data.model[i].PeopleNum_age4);
                            self.PeopleNum_xlssData.push(res.data.model[i].PeopleNum_xlss);
                            self.PeopleNum_xlbkData.push(res.data.model[i].PeopleNum_xlbk);
                            self.PeopleNum_xldzData.push(res.data.model[i].PeopleNum_xldz);
                            self.PeopleNum_xlzzData.push(res.data.model[i].PeopleNum_xlzz);
                            self.PeopleNum_xlqtData.push(res.data.model[i].PeopleNum_xlqt);
                            self.PeopleNum_zczgjData.push(res.data.model[i].PeopleNum_zczgj);
                            self.PeopleNum_zcfgjData.push(res.data.model[i].PeopleNum_zcfgj);
                            self.PeopleNum_zczjData.push(res.data.model[i].PeopleNum_zcfgj);
                            self.PeopleNum_zccjData.push(res.data.model[i].PeopleNum_zccj);
                            self.PeopleNum_zcqtData.push(res.data.model[i].PeopleNum_zcqt);
                            //地图数据
                            self.MapInstituNumData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].InstituNum});
                            self.MapInstituNum_CityData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].InstituNum_City});
                            self.MapInstituNum_AreaData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].InstituNum_Area});
                            self.MapInstituNum_townData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].InstituNum_town});
                            self.MapPeopleNumData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].PeopleNum});
                            self.MapPeopleNum_CityData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].PeopleNum_City});
                            self.MapPeopleNum_AreaData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].PeopleNum_Area});
                            self.MapPeopleNum_manData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].PeopleNum_man});
                            self.MapPeopleNum_womanData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].PeopleNum_woman});
                            self.MapPeopleNum_age1Data.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].PeopleNum_age1});
                            self.MapPeopleNum_age2Data.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].PeopleNum_age2});
                            self.MapPeopleNum_age3Data.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].PeopleNum_age3});
                            self.MapPeopleNum_age4Data.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].PeopleNum_age4});
                            self.MapPeopleNum_xlssData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].PeopleNum_xlss});
                            self.MapPeopleNum_xlbkData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].PeopleNum_xlbk});
                            self.MapPeopleNum_xldzData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].PeopleNum_xldz});
                            self.MapPeopleNum_xlzzData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].PeopleNum_xlzz});
                            self.MapPeopleNum_xlqtData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].PeopleNum_xlqt});
                            self.MapPeopleNum_zczgjData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].PeopleNum_zczgj});
                            self.MapPeopleNum_zcfgjData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].PeopleNum_zcfgj});
                            self.MapPeopleNum_zczjData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].PeopleNum_zcfgj});
                            self.MapPeopleNum_zccjData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].PeopleNum_zccj});
                            self.MapPeopleNum_zcqtData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].PeopleNum_zcqt});
                       }
                       self.barList0.push(self.InstituNumData,self.InstituNum_CityData,self.InstituNum_AreaData,self.InstituNum_townData);
                       self.barList1.push(self.PeopleNumData,self.PeopleNum_CityData,self.PeopleNum_AreaData);
                       self.barList2.push(self.PeopleNumData,self.PeopleNum_manData,self.PeopleNum_womanData);
                       self.barList3.push(self.PeopleNumData,self.PeopleNum_age1Data,self.PeopleNum_age2Data,self.PeopleNum_age3Data,self.PeopleNum_age4Data);
                       self.barList4.push(self.PeopleNumData,self.PeopleNum_xlssData,self.PeopleNum_xlbkData,self.PeopleNum_xldzData,self.PeopleNum_xlzzData,self.PeopleNum_xlqtData);
                       self.barList5.push(self.PeopleNumData,self.PeopleNum_zczgjData,self.PeopleNum_zcfgjData,self.PeopleNum_zczjData,self.PeopleNum_zccjData,self.PeopleNum_zcqtData);
                       self.mapList0.push(self.MapInstituNumData,self.MapInstituNum_CityData,self.MapInstituNum_AreaData,self.MapInstituNum_townData);
                       self.mapList1.push(self.MapPeopleNumData,self.MapPeopleNum_CityData,self.MapPeopleNum_AreaData);
                       self.mapList2.push(self.MapPeopleNumData,self.MapPeopleNum_manData,self.MapPeopleNum_womanData);
                       self.mapList3.push(self.MapPeopleNumData,self.MapPeopleNum_age1Data,self.MapPeopleNum_age2Data,self.MapPeopleNum_age3Data,self.MapPeopleNum_age4Data);
                       self.mapList4.push(self.MapPeopleNumData,self.MapPeopleNum_xlssData,self.MapPeopleNum_xlbkData,self.MapPeopleNum_xldzData,self.MapPeopleNum_xlzzData,self.MapPeopleNum_xlqtData);
                       self.mapList5.push(self.MapPeopleNumData,self.MapPeopleNum_zczgjData,self.MapPeopleNum_zcfgjData,self.MapPeopleNum_zczjData,self.MapPeopleNum_zccjData,self.MapPeopleNum_zcqtData);
                       self.showEcharts();
                    }
                });
        },
        showEcharts(){//显示柱状图
            //显示柱状图
            var self=this;
            var containerBarOne=document.getElementById('divBarOne');
            var containerBarTwo=document.getElementById('divBarTwo');
            var containerBarThree=document.getElementById('divBarThree');
            var containerBarFour=document.getElementById('divBarFour');
            var containerBarFive=document.getElementById('divBarFive');
            var containerBarSix=document.getElementById('divBarSix');
            var containerTable=document.getElementsByClassName('ivu-col ivu-col-span-4');
            // //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
            var resizeContainerBar = function () {
                //containerTable[0].clientWidth 左侧菜单栏的宽度
                containerBarOne.style.width = (window.innerWidth- containerTable[0].clientWidth-20)+'px';
                containerBarOne.style.height = (window.innerHeight-310)+'px';
                containerBarTwo.style.width = (window.innerWidth- containerTable[0].clientWidth-20)+'px';
                containerBarTwo.style.height = (window.innerHeight-360)+'px';
                containerBarThree.style.width = (window.innerWidth- containerTable[0].clientWidth-20)+'px';
                containerBarThree.style.height = (window.innerHeight-360)+'px';
                containerBarFour.style.width = (window.innerWidth- containerTable[0].clientWidth-20)+'px';
                containerBarFour.style.height = (window.innerHeight-360)+'px';
                containerBarFive.style.width = (window.innerWidth- containerTable[0].clientWidth-20)+'px';
                containerBarFive.style.height = (window.innerHeight-360)+'px';
                containerBarSix.style.width = (window.innerWidth- containerTable[0].clientWidth-20)+'px';
                containerBarSix.style.height = (window.innerHeight-360)+'px';
            };
            //设置容器高宽
            resizeContainerBar();
            var myBarOne = myEcharts.init(containerBarOne, 'shine');
            var myBarTwo = myEcharts.init(containerBarTwo, 'shine');
            var myBarThree = myEcharts.init(containerBarThree, 'shine');
            var myBarFour = myEcharts.init(containerBarFour, 'shine');
            var myBarFive = myEcharts.init(containerBarFive, 'shine');
            var myBarSix = myEcharts.init(containerBarSix, 'shine');
            var BarNameOne=self.CurrentYear+'年(九)'+self.CurrentAreaName+'蔬菜技术服务机构柱状统计图(全面统计)';
            var BarNameTwo=self.CurrentYear+'年(九)'+self.CurrentAreaName+'蔬菜专业技术人员按地区分柱状统计图(全面统计)';
            var BarNameThree=self.CurrentYear+'年(九)'+self.CurrentAreaName+'蔬菜专业技术人员按性别分柱状统计图(全面统计)';
            var BarNameFour=self.CurrentYear+'年(九)'+self.CurrentAreaName+'蔬菜专业技术人员按年龄分柱状统计图(全面统计)';
            var BarNameFive=self.CurrentYear+'年(九)'+self.CurrentAreaName+'蔬菜专业技术人员按学历层次分柱状统计图(全面统计)';
            var BarNameSix=self.CurrentYear+'年(九)'+self.CurrentAreaName+'蔬菜专业技术人员职称情况柱状统计图(全面统计)';
            var optionBarOne = self.GetBarOption(BarNameOne,self.AreaData,self.echartsItem0,self.barList0);
            var optionBarTwo = self.GetBarOption(BarNameTwo,self.AreaData,self.echartsItem1,self.barList1);
            var optionBarThree = self.GetBarOption(BarNameThree,self.AreaData,self.echartsItem2,self.barList2);
            var optionBarFour = self.GetBarOption(BarNameFour,self.AreaData,self.echartsItem3,self.barList3);
            var optionBarFive = self.GetBarOption(BarNameFive,self.AreaData,self.echartsItem4,self.barList4);
            var optionBarSix = self.GetBarOption(BarNameSix,self.AreaData,self.echartsItem5,self.barList5);
            myBarOne.setOption(optionBarOne);
            myBarTwo.setOption(optionBarTwo);
            myBarThree.setOption(optionBarThree);
            myBarFour.setOption(optionBarFour);
            myBarFive.setOption(optionBarFive);
            myBarSix.setOption(optionBarSix);
            //******************显示地图
            var self=this;
            var containerMapOne=document.getElementById('divMapOne');
            var containerMapTwo=document.getElementById('divMapTwo');
            var containerMapThree=document.getElementById('divMapThree');
            var containerMapFour=document.getElementById('divMapFour');
            var containerMapFive=document.getElementById('divMapFive');
            var containerMapSix=document.getElementById('divMapSix');
            // //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
            var resizeContainerMap = function () {
                //containerTable[0].clientWidth 左侧菜单栏的宽度
                containerMapOne.style.width = (window.innerWidth- containerTable[0].clientWidth-20)+'px';
                containerMapOne.style.height = (window.innerHeight-310)+'px';
                containerMapTwo.style.width = (window.innerWidth- containerTable[0].clientWidth-20)+'px';
                containerMapTwo.style.height = (window.innerHeight-360)+'px';
                containerMapThree.style.width = (window.innerWidth- containerTable[0].clientWidth-20)+'px';
                containerMapThree.style.height = (window.innerHeight-360)+'px';
                containerMapFour.style.width = (window.innerWidth- containerTable[0].clientWidth-20)+'px';
                containerMapFour.style.height = (window.innerHeight-360)+'px';
                containerMapFive.style.width = (window.innerWidth- containerTable[0].clientWidth-20)+'px';
                containerMapFive.style.height = (window.innerHeight-360)+'px';
                containerMapSix.style.width = (window.innerWidth- containerTable[0].clientWidth-20)+'px';
                containerMapSix.style.height = (window.innerHeight-360)+'px';
            };
            //设置容器高宽
            resizeContainerMap();

            var myMapOne = myEcharts.init(containerMapOne, 'shine');
            var myMapTwo = myEcharts.init(containerMapTwo, 'shine');
            var myMapThree = myEcharts.init(containerMapThree, 'shine');
            var myMapFour = myEcharts.init(containerMapFour, 'shine');
            var myMapFive = myEcharts.init(containerMapFive, 'shine');
            var myMapSix = myEcharts.init(containerMapSix, 'shine');
            var MapNameOne=self.CurrentYear+'年(九)'+self.CurrentAreaName+'蔬菜技术服务机构统计地区分布图(全面统计)';
            var MapNameTwo=self.CurrentYear+'年(九)'+self.CurrentAreaName+'蔬菜专业技术人员统计地区分布图(全面统计)';
            var MapNameThree=self.CurrentYear+'年(九)'+self.CurrentAreaName+'蔬菜专业技术人员按性别分统计地区分布图(全面统计)';
            var MapNameFour=self.CurrentYear+'年(九)'+self.CurrentAreaName+'蔬菜专业技术人员按年龄分统计地区分布图(全面统计)';
            var MapNameFive=self.CurrentYear+'年(九)'+self.CurrentAreaName+'蔬菜专业技术人员按学历层次分统计地区分布图(全面统计)';
            var MapNameSix=self.CurrentYear+'年(九)'+self.CurrentAreaName+'蔬菜专业技术人员职称情况统计地区分布图(全面统计)';
            var optionMapOne = self.GetMapOption(MapNameOne,self.GeoData,self.mapType,self.echartsItem0,self.mapList0);
            var optionMapTwo = self.GetMapOption(MapNameTwo,self.GeoData,self.mapType,self.echartsItem1,self.mapList1);
            var optionMapThree = self.GetMapOption(MapNameThree,self.GeoData,self.mapType,self.echartsItem2,self.mapList2);
            var optionMapFour = self.GetMapOption(MapNameFour,self.GeoData,self.mapType,self.echartsItem3,self.mapList3);
            var optionMapFive = self.GetMapOption(MapNameFive,self.GeoData,self.mapType,self.echartsItem4,self.mapList4);
            var optionMapSix = self.GetMapOption(MapNameSix,self.GeoData,self.mapType,self.echartsItem5,self.mapList5);
            myMapOne.setOption(optionMapOne);
            myMapTwo.setOption(optionMapTwo);
            myMapThree.setOption(optionMapThree);
            myMapFour.setOption(optionMapFour);
            myMapFive.setOption(optionMapFive);
            myMapSix.setOption(optionMapSix);
            //用于使chart自适应高度和宽度
            window.onresize = function () {
                //重置容器高宽
                resizeContainerBar();
                resizeContainerMap();
                myMapOne.resize();
                myMapTwo.resize();
                myMapThree.resize();
                myMapFour.resize();
                myMapFive.resize();
                myMapSix.resize();
                myBarOne.resize();
                myBarTwo.resize();
                myBarThree.resize();
                myBarFour.resize();
                myBarFive.resize();
                myBarSix.resize();
            };
        },
        getDetail(AreaCode){//获取详情  
            var self=this;
            self.detailView=true;   
            self.searchModel.AreaCode=AreaCode;
            self.$http.post('VegTecPromotion/PostDetailStats', self.searchModel).then(function (res) {
                    if(res.data.status===1)
                    {
                        self.CurrentAreaName=res.data.model[0].AreaName;
                        self.detailDatas= res.data.model;
                    }
                });
        },
        getExcelData(){
            window.open(this.$http.defaults.baseURL + "VegTecPromotion/GetStatsExcelData?AreaCode="+this.searchModel.AreaCode+"&&FillInYear="+this.searchModel.FillInYear+"&&Status="+this.searchModel.Status);
        },

    },
    //创建Vue页面方法
    created: function () {
        this.changeButton("listShow");
        this.getStatsList();
           },
    watch: {
        //需要监听的在此处新增监听对象
    }
}
</script>
<style scoped src="../../styles/stats.css"></style>
